<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { downloadApp, getAgreement, getConcernAccountList } from "~/api/user";
import { useImageCache } from "~/composables/useImageCache";

// 使用图片缓存功能
const { getCoverImage, preloadImages } = useImageCache();

const focusHover = (e: Event, url: string) => {
  if (url) {
    window.open(url, "_blank");
  }
  e.stopPropagation();
};
onMounted(() => {
  getApp();
  getAgreementFn();
  AccountList();
});
// 获取app下载
const app = ref([]);
const getApp = async () => {
  try {
    const res = await downloadApp();
    
    // 预加载APP下载的二维码图片
    if (res.data && res.data.length > 0) {
      const qrCodeOssIds = res.data
        .map(item => item.qrCode)
        .filter(qrCode => qrCode && !qrCode.includes('http'))
        .map(qrCode => qrCode.split(',')[0])
      
      if (qrCodeOssIds.length > 0) {
        await preloadImages(qrCodeOssIds)
      }
      
      // 处理图片URL，避免模板中重复调用getCoverImage
      app.value = res.data.map(item => ({
        ...item,
        processedQrCode: getCoverImage(item.qrCode) || item.qrCode
      }))
    } else {
      app.value = res.data || []
    }
  } catch (err) {
    console.log(err);
    app.value = []
  }
};
// 获取协议等
const agreement = ref([]);
const getAgreementFn = async () => {
  try {
    const res = await getAgreement();
    console.log(res, '----协议API返回数据-----');
    
    // 处理API返回的数据结构
    if (res && res.code === 200 && res.data) {
      agreement.value = res.data;
      
      // 示例：如果协议数据中包含图片，可以使用图片缓存功能
      // 提取所有需要预加载的图片ossId
      // const imageOssIds = res.data
      //   .filter(item => item.coverImage && !item.coverImage.includes('http'))
      //   .map(item => item.coverImage.split(',')[0])
      // if (imageOssIds.length > 0) {
      //   preloadImages(imageOssIds)
      // }
    } else {
      console.warn('获取协议数据失败:', res);
      agreement.value = [];
    }
  } catch (err) {
    console.error('获取协议数据出错:', err);
    agreement.value = [];
  }
};
// 备案信息
const recordInfo = computed(() => {
  return agreement.value.find((item: any) => item.type === 5 && item.content);
});
// 关注账号列表(抖音知乎）
const concernAccountList = ref([]);
const AccountList = async () => {
  try {
    const res = await getConcernAccountList();
    console.log(res, '----API返回数据-----');
    
    // 处理API返回的数据结构
    if (res && res.code === 200 && res.data) {
      // 预加载关注账号的图片
      const imageOssIds = res.data
        .flatMap(item => [item.icon, item.qrCode])
        .filter(img => img && !img.includes('http'))
        .map(img => img.split(',')[0])
      
      if (imageOssIds.length > 0) {
        await preloadImages(imageOssIds)
      }
      
      // 处理图片URL，避免模板中重复调用getCoverImage
      concernAccountList.value = res.data.map(item => ({
        ...item,
        processedIcon: getCoverImage(item.icon) || item.icon,
        processedQrCode: getCoverImage(item.qrCode) || item.qrCode
      }))
    } else {
      console.warn('获取关注账号列表失败:', res);
      concernAccountList.value = [];
    }
  } catch (err) {
    console.error('获取关注账号列表出错:', err);
    concernAccountList.value = [];
  }
};
</script>

<template>
  <div class="footer">
    <div class="footer-content">
      <div class="agreement">
        <p class="title">协议与规则</p>
        <p class="links">
          <nuxt-link :to="{ path: '/agreement', query: { id: 1 } }">用户协议</nuxt-link>
        </p>
        <p class="links">
          <nuxt-link :to="{ path: '/agreement', query: { id: 3 } }">隐私政策</nuxt-link>
        </p>
        <p class="links">
          <nuxt-link :to="{ path: '/agreement', query: { id: 2 } }">交易规则</nuxt-link>
        </p>
      </div>
      <div class="focus-us">
        <p class="title">关注我们</p>
        <p class="icons">
          <a
            v-for="item in concernAccountList"
            :key="item.id"
            target="_blank"
            @click="(e) => focusHover(e, item.url)"
          >
            <img class="f-icon" :src="item.processedIcon" alt="" />
            <img v-if="item.qrCode" class="f-qr-code" :src="item.processedQrCode" alt="" />
          </a>
        </p>
      </div>
      <div class="app-download">
        <p class="title">APP下载</p>
        <div class="apps">
          <div class="app" v-for="item in app" :key="item.id">
            <img :src="item.processedQrCode" alt="" />
            <span>{{ item.subLabel }}</span>
          </div>
        </div>
      </div>
    </div>
    <p class="copyright" v-if="recordInfo">{{ recordInfo.content }}</p>
  </div>
</template>

<style scoped lang="scss">
.footer {
  background: #14262e;

  .footer-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 70px 20px 46px;
    color: #fff;
    box-sizing: border-box;

    @media (max-width: 768px) {
      flex-direction: column;
      padding: 40px 16px 32px;
      gap: 32px;
    }

    @media (max-width: 480px) {
      padding: 32px 12px 24px;
      gap: 24px;
    }
  }

  .title {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 500;

    @media (max-width: 768px) {
      font-size: 18px;
      margin-bottom: 12px;
    }

    @media (max-width: 480px) {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }

  .agreement {
    flex: 1;

    @media (max-width: 768px) {
      flex: none;
    }

    .links {
      margin-bottom: 8px;

      @media (max-width: 768px) {
        margin-bottom: 6px;
      }

      a {
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        text-decoration: none;
        font-size: 14px;

        @media (max-width: 480px) {
          font-size: 13px;
        }

        &:nth-child(1) {
          margin-right: 32px;

          @media (max-width: 480px) {
            margin-right: 20px;
          }
        }

        &:hover {
          color: #fff;
        }
      }
    }
  }

  .focus-us {
    flex: 1;

    @media (max-width: 768px) {
      flex: none;
    }

    .icons {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      @media (max-width: 480px) {
        gap: 16px;
      }

      a {
        display: inline-block;
        width: 36px;
        height: 36px;
        position: relative;
        cursor: pointer;

        @media (max-width: 480px) {
          width: 32px;
          height: 32px;
        }

        .f-icon {
          width: 36px;
          height: 36px;
          opacity: 0.4;

          @media (max-width: 480px) {
            width: 32px;
            height: 32px;
          }

          &:hover {
            opacity: 1;
          }
        }

        &:hover {
          .f-qr-code {
            display: block;
          }
        }

        .f-qr-code {
          display: none;
          position: absolute;
          top: 50px;
          left: 0;
          width: 150px;
          height: 150px;
          border-radius: 12px;
          background: #fff;
          z-index: 10;

          @media (max-width: 768px) {
            width: 120px;
            height: 120px;
            top: 40px;
          }

          @media (max-width: 480px) {
            width: 100px;
            height: 100px;
            top: 36px;
          }
        }
      }
    }
  }

  .app-download {
    flex: 1;

    @media (max-width: 768px) {
      flex: none;
    }

    .apps {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;

      @media (max-width: 768px) {
        justify-content: flex-start;
      }

      @media (max-width: 480px) {
        gap: 10px;
        justify-content: center;
      }

      .app {
        cursor: pointer;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px;

        @media (max-width: 768px) {
          padding: 6px;
        }

        @media (max-width: 480px) {
          padding: 4px;
        }

        img {
          width: 120px;
          height: 120px;
          margin-bottom: 4px;

          @media (max-width: 768px) {
            width: 100px;
            height: 100px;
          }

          @media (max-width: 480px) {
            width: 80px;
            height: 80px;
            margin-bottom: 2px;
          }
        }

        span {
          color: #008571;
          font-weight: bold;
          font-size: 12px;
          text-align: center;

          @media (max-width: 480px) {
            font-size: 11px;
          }
        }
      }
    }
  }
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
  text-align: center;
  color: #fff;
  font-size: 12px;

  @media (max-width: 768px) {
    padding: 16px;
    font-size: 11px;
  }

  @media (max-width: 480px) {
    padding: 12px;
    font-size: 10px;
    line-height: 1.4;
  }
}

// 平板适配
@media (min-width: 769px) and (max-width: 1024px) {
  .footer-content {
    max-width: 100%;
    padding: 60px 24px 40px;
  }

  .app-download .apps .app {
    img {
      width: 100px;
      height: 100px;
    }
  }
}

// 大屏幕适配
@media (min-width: 1200px) {
  .footer-content {
    max-width: 1400px;
  }
}
</style>
